<template>
  <div class="MainCard">
    <el-row justify="space-around">
      <el-image :src="imgUrl[0]" />
      <el-card shadow="hover" class="fontCard">
        <span>对于进行代码研究和开发的人员有很大的启发</span>
      </el-card>
      <el-image :src="imgUrl[1]" />
      <el-card shadow="hover" class="fontCard">
        <span>对于初学代码的自学人员和学生有极大的帮助</span>
      </el-card>
      <el-image :src="imgUrl[2]" />
      <el-card shadow="hover" class="fontCard">
        <span>对于进行工作和回顾相关知识的有很高的效率</span>
      </el-card>
    </el-row>
  </div>
</template>

<script setup>
const imgUrl = [
    "http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E4%BA%BA%E7%89%A9-1.png",
    "http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E4%BA%BA%E7%89%A9-2.png",
    "http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E4%BA%BA%E7%89%A9-3.png"
]

</script>

<style scoped>
.MainCard{
  width: 90%;
  margin-left: 5%;
  border-radius: 25px;
  background-color: rgba(143, 203, 247, 0.38);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.fontCard{
  /*width: 80px;*/
  height: 40%;
  width: 10%;
  margin-top: 2%;
  border-radius: 25px;
  background-color: rgba(143, 203, 247, 0.38);
}
.fontCard:hover{
  font-weight: bold;
  transition: font-weight;
}
</style>
